<template>
	<view class="container">
		<!-- 注意事项弹窗 -->
		<u-popup mode="center" v-model:show="showNotice" class="custom-popup">
			<view class="popup-content">
				<text class="popup-title">注意事项</text>
				<br />
				<text class="popup-message">
					1. 发布土地时“土地标题”、“土地描述”\n以及“土地截图”必须跟实际保持一致。<br />
					2. 不允许商品带有任何联系方式。<br />
				</text>
				<u-button class="confirm-button" @click="closeNotice">我知道了</u-button>
			</view>
		</u-popup>

		<!-- 表格内容（注意事项确认后展示） -->
		<view v-if="!showNotice">
			<!-- 表单标题 -->
			<view class="form-header">
				<text class="form-title">基地信息</text>
			</view>

			<!-- 表格项 -->
			<view class="form-section">
				<!-- 基地名称 -->
				<view class="form-item">
					<text class="form-label">基地名称</text>
					<input v-model="formData.baseName" class="form-input" type="text" placeholder="请填写基地名称" />
				</view>

				<!-- 种植类型（使用下拉框） -->
				<view class="form-item">
					<text class="form-label">种植类型</text>
					<picker :range="plantTypes" @change="onTypeChange">
						<view class="picker">
							<text>{{ selectedType }}</text>
						</view>
					</picker>
				</view>

				<!-- 地区选择（逐级选择） -->
				<view class="form-item">
					<text class="form-label">省份</text>
					<picker :range="provinceList" @change="onProvinceChange">
						<view class="picker">
							<text>{{ selectedProvince ? selectedProvince : '请选择省份' }}</text>
						</view>
					</picker>
				</view>

				<view class="form-item" v-if="selectedProvince">
					<text class="form-label">城市</text>
					<picker :range="cityList" @change="onCityChange">
						<view class="picker">
							<text>{{ selectedCity ? selectedCity : '请选择城市' }}</text>
						</view>
					</picker>
				</view>

				<view class="form-item" v-if="selectedCity">
					<text class="form-label">区域</text>
					<picker :range="areaList" @change="onAreaChange">
						<view class="picker">
							<text>{{ selectedArea ? selectedArea : '请选择区域' }}</text>
						</view>
					</picker>
				</view>

				<!-- 基地大小 -->
				<view class="form-item">
					<text class="form-label">基地大小</text>
					<input v-model="formData.baseSize" class="form-input" type="number" placeholder="请填写基地大小" />
				</view>

				<!-- 基地描述 -->
				<view class="form-item">
					<text class="form-label">基地描述</text>
					<input v-model="formData.baseDescription" class="form-input" type="text" placeholder="请填写基地描述" />
				</view>

				<!-- 基地价格 -->
				<view class="form-item">
					<text class="form-label">基地价格</text>
					<input v-model="formData.basePrice" class="form-input" type="number" placeholder="请填写基地价格" />
				</view>

				<!-- 图片上传 -->
				<view class="form-item">
					<text class="form-label">上传图片</text>
					<view class="img-upload" @click="chooseImage">
						<image v-if="formData.image" :src="formData.image" mode="aspectFill" class="uploaded-img" />
						<view v-else class="upload-placeholder">点击上传图片</view>
					</view>
				</view>

				<!-- 下一步按钮 -->
				<up-tabbar activeColor="#6bc493">
					<up-tabbar-item text="首页" icon="/static/shou.png"
						@click="navigateTo('/pages/index/index')"></up-tabbar-item>
					<up-tabbar-item text="其他" icon="/static/de.png"></up-tabbar-item>
					<u-button class="custom-button" @click="onNext">出售土地</u-button>
				</up-tabbar>
			</view>
		</view>

		<!-- 警告提示 -->
		<up-notify ref="uNotifyRef" :style="{ zIndex: 9999 }"></up-notify>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import areaData from 'china-area-data';
	import {
		sale
	} from '@/common/api.js';
	import {
		useUserStore
	} from '@/stores/user.js';
	const userStore = useUserStore(); // 获取用户数据
	// 表单数据对象
	const formData = ref({
		baseName: '', // 基地名称
		plantType: '', // 种植类型
		characterName: '', // 基地区域名称
		baseSize: '', // 基地大小
		baseDescription: '', // 基地描述
		basePrice: '', // 基地价格
		image: '', // 图片路径
	});

	// 可供选择的种植类型
	const plantTypes = ref(['蔬菜区', '果树区', '稻米区', '茶树区']);
	const selectedType = ref('请选择种植类型');

	// 处理用户选择种植类型
	const onTypeChange = (e) => {
		const index = e.detail.value;
		selectedType.value = plantTypes.value[index];
		formData.value.plantType = plantTypes.value[index]; // 更新种植类型到表单数据
	};

	// 控制弹窗显示和表格内容显示
	const showNotice = ref(true);

	// 在页面加载时显示弹窗
	onMounted(() => {
		showNotice.value = true; // 打开注意事项弹窗
	});
	const uNotifyRef = ref(null);
	// 关闭注意事项弹窗
	const closeNotice = () => {
		showNotice.value = false; // 关闭弹窗并显示表格
	};

	// 处理下一步按钮点击
	const onNext = () => {
		if (userStore.userId === 0) {
			// 使用 show 方法来显示通知
			uNotifyRef.value.show({
				message: '请先登入账号！！',
				type: 'error', // 提醒类型
				color: '#ffffff', // 字体颜色
				bgColor: 'linear-gradient(45deg, #ff9800, #f44336)', // 渐变背景色
				duration: 3000, // 显示时间（毫秒）
				fontSize: 15, // 字体大小
				top: 50, // 距离顶部的距离，避免被导航栏遮挡
				safeAreaInsetTop: true, // 考虑顶部的安全区域
			});
			return;
		}
		if (selectedProvince.value === '' && selectedCity.value === '' && selectedArea.value === '') {
			// 使用 show 方法来显示通知
			uNotifyRef.value.show({
				message: '区域请填写完整！！',
				type: 'error', // 提醒类型
				color: '#ffffff', // 字体颜色
				bgColor: 'linear-gradient(45deg, #ff9800, #f44336)', // 渐变背景色
				duration: 3000, // 显示时间（毫秒）
				fontSize: 15, // 字体大小
				top: 50, // 距离顶部的距离，避免被导航栏遮挡
				safeAreaInsetTop: true, // 考虑顶部的安全区域
			});
			return;
		}

		// 显示确认弹窗
		uni.showModal({
			title: '确认出售',
			content: '您确定要出售这块土地吗？',
			success: (res) => {
				if (res.confirm) {
					console.log('用户点击确定');

					// 执行出售土地的操作
					const data = {
						userId: userStore.userId,
						baseType: formData.value.plantType,
						baseName: formData.value.baseName,
						region: formData.value.characterName,
						baseSize: formData.value.baseSize,
						basePrice: formData.value.basePrice,
						baseDescription: formData.value.baseDescription,
						baseImg: formData.value.baseImg,
					};

					// 在这里执行出售土地的操作
					sellLand(data);
				} else if (res.cancel) {
					console.log('用户点击取消');
					// 用户取消后的逻辑处理（如果有需要的话）
				}
			}
		});
	};

	// 出售土地的函数
	const sellLand = (data) => {
		// 执行出售土地的具体逻辑代码
		console.log('土地已出售:', data);
		sale(data).then(res => {
			if (res.code === 200) {
				const signString = encodeURIComponent(JSON.stringify(res.data)); // 使用 encodeURIComponent 编码

				wx.redirectTo({
					url: `/pages/contract/signature?sign=${signString}`, // 目标页面的路径，并附带参数
				});
			}
		})
	};

	// 省市区选择器相关
	const selectedProvince = ref(''); // 选择的省份
	const selectedCity = ref(''); // 选择的城市
	const selectedArea = ref(''); // 选择的区域

	// 用于保存省、市、区列表
	const provinceList = ref([]);
	const cityList = ref([]);
	const areaList = ref([]);

	// 将 china-area-data 数据转换为适合使用的数据格式
	onMounted(() => {
		formatAreaData();
	});

	// 格式化 areaData，适应选择器的数据格式
	const formatAreaData = () => {
		const provinces = Object.entries(areaData['86']).map(([code, name]) => ({
			code,
			name,
		}));
		provinceList.value = provinces.map((item) => item.name);
		selectedProvince.value = ''; // 重置选择的省份
		selectedCity.value = ''; // 重置选择的城市
		selectedArea.value = ''; // 重置选择的区域
	};

	// 处理省份选择
	const onProvinceChange = (e) => {
		const index = e.detail.value;
		selectedProvince.value = provinceList.value[index];
		const provinceCode = Object.keys(areaData['86'])[index];
		updateCityList(provinceCode);
		selectedCity.value = ''; // 重置选择的城市
		selectedArea.value = ''; // 重置选择的区域
	};

	// 更新城市列表
	const updateCityList = (provinceCode) => {
		const cities = Object.entries(areaData[provinceCode] || {}).map(([code, name]) => ({
			code,
			name,
		}));
		cityList.value = cities.map((item) => item.name);
	};

	// 处理城市选择
	const onCityChange = (e) => {
		const index = e.detail.value;
		selectedCity.value = cityList.value[index];
		const provinceCode = Object.keys(areaData['86']).find(code => areaData['86'][code] === selectedProvince.value);
		if (provinceCode) {
			const cityCode = Object.keys(areaData[provinceCode])[index];
			updateAreaList(cityCode);
			selectedArea.value = ''; // 重置选择的区域
		}
	};

	// 更新区域列表
	const updateAreaList = (cityCode) => {
		const areas = Object.entries(areaData[cityCode] || {}).map(([code, name]) => ({
			code,
			name,
		}));
		areaList.value = areas.map((item) => item.name);
	};

	// 处理区域选择
	const onAreaChange = (e) => {
		const index = e.detail.value;
		selectedArea.value = areaList.value[index];
		formData.value.characterName = `${selectedProvince.value}-${selectedCity.value}-${selectedArea.value}`;
	};

	// 选择图片
	const chooseImage = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				console.log('选择的图片路径:', res.tempFilePaths[0]); // 输出图片路径调试信息
				formData.value.image = res.tempFilePaths[0];
			},
			fail: (err) => {
				console.error('图片选择失败:', err);
			},
		});
	};
</script>










<style scoped>
	.upload-placeholder {
		width: 100%;
		height: 200rpx;
		background-color: #f8f8f8;
		border: 1px dashed #d9d9d9;
		color: #999;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		border-radius: 8px;
	}

	.uploaded-img {
		width: 100%;
		height: 200rpx;
		border-radius: 8px;
	}

	.custom-button {
		background-color: #00b800;
		/* 绿色背景颜色 */
		color: #ffffff;
		/* 按钮文字为白色 */
		padding: 10px 20px;
		/* 设置按钮内边距 */
		border-radius: 8px;
		/* 设置圆角 */
		border: none;
		/* 去除边框 */
		font-size: 16px;
		/* 字体大小 */
		font-weight: bold;
		/* 字体加粗 */
		cursor: pointer;
		/* 鼠标悬停样式 */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		/* 添加阴影 */
		transition: background-color 0.3s;
		/* 设置背景色变换过渡效果 */
		margin-top: 4px;
		margin-right: 10px;
	}

	.custom-button:hover {
		background-color: #009900;
		/* 鼠标悬停时背景颜色稍微加深 */
	}

	.container {
		padding: 20px;
		min-height: 100vh;
	}

	/* 自定义弹窗的宽度和样式 */
	.custom-popup>>>.uni-popup__wrapper {
		width: 90%;
		max-width: 400px;
		margin: 0 auto;
		border-radius: 16px;
		padding: 20px;
	}

	/* 弹窗内容的样式 */
	.popup-content {
		padding: 15px;
		background-color: #ffffff;
		text-align: center;
	}

	.popup-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.popup-message {
		font-size: 14px;
		line-height: 1.5;
		text-align: left;
		color: #666;
		margin-bottom: 20px;
	}

	.confirm-button {
		background-color: #ff6347;
		color: #ffffff;
		border-radius: 25px;
		padding: 10px 20px;
		width: 80%;
		margin: 0 auto;
	}

	.form-header {
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.form-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.form-section {
		background-color: #ffffff;
		padding: 15px;
		border-radius: 8px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	}

	.form-item {
		display: flex;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	.form-label {
		width: 30%;
		font-size: 16px;
		color: #333;
	}

	.form-value {
		width: 70%;
		color: #999;
		text-align: right;
	}

	.form-input {
		width: 70%;
		padding: 5px;
		border: none;
		outline: none;
		background: none;
		text-align: right;
	}

	.form-agreement {
		margin-top: 20px;
		text-align: left;
		font-size: 14px;
	}

	.next-button {
		background-color: #ff6347;
		color: #ffffff;
		font-size: 18px;
		border-radius: 8px;
		padding: 12px;
		width: 100%;
		margin-top: 20px;
	}
</style>